<!-- Student_FreeCourseVideoPlayer.html -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
	<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
	<title>视频播放器</title>
	<style type="text/css">
		html,body{
			padding: 0;
			margin: 0;
		}
		.player_div{
			background-color: black;
		}
	</style>
</head>
<body>
	<div class="base_navigation_bar base_style_color">
		<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
		<span id="videoName"></span>
		<a class="base_right_item" onclick="" hidden="hidden">描述</a>
	</div>
	<div class="base_content_div ">
		<div class="player_div" id="J_prismPlayer"></div>
	</div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<!-- <script type="text/javascript" src="../../script/cyberplayer.js"></script> -->
<script type="text/javascript" src="../../script/cyberplayer.min.js"></script>
<script type="text/javascript">
	var statusBarH = 25;
	apiready = function(){
		api.setScreenOrientation({
			orientation : 'auto'
		});
		if (api.systemType == 'ios') {
			statusBarH = 20;
		}
		var width = api.winWidth;
		// var height = width * 3 / 4;
		var height = api.frameHeight - 44;
		$('.player_div').attr('style', 'width:'+width+'; height:'+height+';');
		var params = api.pageParam;
		var image = params.image;
		if (image == null) {
			image = '';
		}
		$('#videoName').text(params.title);
		//设置视频
		var player = cyberplayer("J_prismPlayer").setup({
	        width: width, // 宽度，也可以支持百分比(不过父元素宽度要有)
	        height: height, // 高度，也可以支持百分比
	        title: params.title, // 标题
	        file: params.videoUrl, // 播放地址
	        image: image, // 预览图
	        autostart: true, // 是否自动播放
	        stretching: "uniform", // 拉伸设置
	        repeat: false, // 是否重复播放
	        volume: 50, // 音量
	        controls: true, // controlbar是否显示
	        starttime: 0, // 视频开始播放时间，如果不设置，则可以从上次播放时间点续播
	        primary: "html5", // 首先使用html5还是flash播放，默认：html5
	        ak: "c8e778c82a484e6ba2ffb86668835825" // 公有云平台注册即可获得accessKey
	    }); 
	  //   player.on('fullscreen', function(){
	  //   	api.setScreenOrientation({
			// 	orientation : 'auto'
			// });
	  //   });
	  //   player.on('resize', function(){
	  //   	api.setScreenOrientation({
	  //           orientation : 'portrait_up'
	  //       });
	  //   });
	    window.addEventListener("orientationchange", function() {	
	    	setTimeout(function(){
	    		var w = api.winWidth;
				var h = api.winHeight;
				var currentH = h - 44;
				player.resize(w, currentH);
				$('.player_div').attr('style', 'width:'+w+'; height:'+currentH+';');
	    	}, 500);
		}, false);
		api.addEventListener({
		    name: 'keyback'
		}, function(ret, err) {
		    backClick();
		});
	}
	function backClick(){
		api.setScreenOrientation({
            orientation : 'portrait_up'
        });
		api.closeWin();
	}
</script>
</html>